<#include "./common/commonattribute.html"/>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>后台管理</title>
    <link href="${ctx}/static/login/login.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="${ctx}/static/login/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="${ctx}/static/login/js/index.js"></script>
</head>

<body>
<div class="login_box">
    <div class="login_l_img"><img src="${ctx}/static/login/images/login-img.png" /></div>
    <div class="login">
        <div class="login_logo">
            <video id="video" width="150" height="150"
                   style="border-radius: 800px;object-fit:fill" autoplay></video>

        </div>
        <div class="login_name">
            <p>后台管理系统</p>
        </div>
        <form method="post" action="login" id="form">
            <input name="username" id="username" type="text"  value="用户名" onfocus="this.value=''" onblur="if(this.value==''){this.value='用户名'}">
            <span id="password_text" onclick="this.style.display='none';document.getElementById('password').style.display='block';document.getElementById('password').focus().select();" >密码</span>
            <input name="password" type="password" id="password" style="display:none;" onblur="if(this.value==''){document.getElementById('password_text').style.display='block';this.style.display='none'};"/>
            <input type="hidden" name="img" id="img"/>
            <input value="登录" style="width:49%;" type="submit">
            <input value="人脸登录" style="width:49%;" type="button" id="snap">
            <!--<input value="人脸注册" style="width:100%;margin-top: 4px" type="button" id="snap2">-->
            <p style="color: red;float: right;font-size: 15px">${(SPRING_SECURITY_LAST_EXCEPTION.message)!}</p>
        </form>
    </div>
    <canvas style="border:1px solid red;border-radius: 800px;width:120px;height:80px;display:none"
            id="canvas"></canvas>
    <div class="copyright">乐乐有限公司 版权所有©2016-2018 技术支持电话：000-00000000</div>
</div>
<script type="text/javascript">
    function CatchCode(tag) {
        //实际运用可不写，测试代 ， 为单击拍照按钮就获取了当前图像，有其他用途
        var canvans = document.getElementById("canvas");
        var video = document.getElementById("video");
        var context = canvas.getContext("2d");

        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        context.drawImage(video,0,0);

        var imgData = canvans.toDataURL();
        //获取图像在前端截取22位以后的字符串作为图像数据
        var imgData1 = imgData.substring(22);
$("#img").val(imgData1)
        $("#form").submit();
//        var username = $("#username").val();
//        $.ajax({
//            type: "post",
//            url: "login",
//            data: {"img":imgData1,"username":username},
//            success: function(data){
//                alert(data);
//            },error:function(msg){
//                alert("检测到不是你的脸");
//            }
//        });


    }

</script>
</body>
</html>
